/*
 * @Descripttion: 高德地图扩展
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-26 15:33:54
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-06-30 15:46:40
 */


layui.define(["jquery"], function (exports) {
    var $ = layui.$;

    var miniAMap = {
        currentMap: null, // 保存当前地图实例
        // 默认配置项
        defaults: {
            mapCenter: [116.397428, 39.90923], // 默认北京中心点
            containerId: "mapContainer", // 默认地图容器 ID
            startIconUrl: "/assets/images/map/start-point.png", // 起点图标
            endIconUrl: "/assets/images/map/end-point.png",     // 终点图标
            actualStartIconUrl: "/assets/images/map/actual-start-point.png",    // 实际起点图标
            actualEndIconUrl: "/assets/images/map/actual-end-point.png",     // 实际终点图标
            processIconUrl: "/assets/images/map/process.png",     // 处理中图标
            imgWidth: 28,      // 图标默认宽度
            markerOffsetX: 0,   // 标记偏移量
            markerOffsetY: 0   // 标记偏移量
        },
        render: function (options) {
            var options = options || {};
            var containerId = options.containerId || defaults.containerId;
            var options = options.options || {};
            miniAMap.listen();
            var map = miniAMap.initMap(containerId, options);
            return map;
        },

        /**
         * 初始化地图
         * @param containerId
         * @param options
         */
        initMap: function (containerId, options = {}) {
            const map = new AMap.Map(containerId, options);
            // ...初始化配置
            
            miniAMap.currentMap = map; // 更新当前地图实例
            return map; // 返回实例引用
        },
        /**创建折线路线函数
         * https://lbs.amap.com/demo/javascript-api-v2/example/overlayers/polyline-draw
         * @param {*} path 
         * @param {*} options 
         * @returns 
         */
        createPolyline(path, options) {
            return new AMap.Polyline({
                path: path,
                strokeColor: options.color,
                strokeWeight: 4,
                strokeOpacity: 1,
                // 折线样式还支持 'dashed'
                strokeStyle: options.isDashed ? 'dashed' : 'solid',
                // strokeStyle是dashed时有效
                strokeDasharray: options.isDashed ? [5, 5] : [],
                zIndex: options.zIndex || 10
            });
        },
        /**多边形绘制
         * https://lbs.amap.com/demo/javascript-api-v2/example/overlayers/polyline-draw
         * @param {*} path 
         * @param {*} options 
         * @returns 
         */
        createPolygon(path, options) {
            return new AMap.Polygon({
                path: path,
                fillColor: options.fillColor || '#ccebc5',
                strokeOpacity: 1,
                fillOpacity: 0.5,
                strokeColor: options.strokeColor || '#2b8cbe',
                strokeWeight: 4,
                strokeStyle: options.isDashed ? 'dashed' : 'solid',
                strokeDasharray: options.isDashed ? [5, 5] : [],
                zIndex: options.zIndex || 10

            });
        },
        /**创建标记点函数
         * https://lbs.amap.com/demo/jsapi-v2/example/marker/marker-content
         * @param {*} position 位置
         * @param {*} iconUrl  图标
         * @param {*} imgWidth 图片宽度
         * @param {*} timeText 文本
         * @param {*} offsetX 偏移置
         * @returns 
         */
        createMarker({
            position,
            iconUrl,
            imgWidth = miniAMap.defaults.imgWidth,
            timeText,
            offsetX = miniAMap.defaults.markerOffsetX,
            offsetY = miniAMap.defaults.markerOffsetY }) {
            let content = '<div class="amap-marker" style="">';
            // 判断 iconUrl 是否存在
            if (iconUrl) {
                content += `<img class="amap-icon" src="${iconUrl}" width="${imgWidth}" >`;
            }
            // 判断 timeText 是否存在
            if (timeText) {
                content += `<div class="amap-marker-label">${timeText}</div>`;
            }
            content += '</div>';


            const marker = new AMap.Marker({
                position: position,
                offset: new AMap.Pixel(offsetX, offsetY),
                content: content
            });


            return marker;
        },
        onFullscreen(map) {
            const totalMapElement = document.querySelector('.total-map');
            const viewMapContainer = document.querySelector('.view-map');
            const icon = document.querySelector('.fullscreen-icon');

            if (!totalMapElement.classList.contains('map-container-fullscreen')) {
                // 进入全屏
                totalMapElement.classList.add('map-container-fullscreen');
                document.body.appendChild(totalMapElement);

                // 切换为“退出全屏”图标
                icon.classList.remove('layui-icon-screen-full');
                icon.classList.add('layui-icon-screen-restore');
            } else {
                // 退出全屏
                totalMapElement.classList.remove('map-container-fullscreen');
                viewMapContainer.appendChild(totalMapElement);
                // 切换为“全屏”图标
                icon.classList.remove('layui-icon-screen-restore');
                icon.classList.add('layui-icon-screen-full');
            }
            // 地图重绘
            setTimeout(() => {
                map && map.resize();
            }, 50);
        },

        /**
         * 监听
         */
        listen: function () {
            const map = miniAMap.currentMap;
            try {
                //全屏缩小展开缩小地图
                document.getElementById('toggleFullscreen').addEventListener('click', function () {
                    miniAMap.onFullscreen(map)

                });
            } catch (error) {

            }

            try {
                // 图层展开折叠
                document.querySelector('.panel-title').addEventListener('click', function () {
                    console.log('图层展开折叠==')
                    const panel = this;
                    const items = document.querySelector('.panel-control').querySelectorAll('.checkbox-item');
                    const icon = panel.querySelector('.panel-icon');

                    // 切换 active 类控制显示/隐藏
                    panel.classList.toggle('active');

                    items.forEach(item => {
                        if (panel.classList.contains('active')) {
                            item.style.display = 'block'; // 显示
                        } else {
                            item.style.display = 'none'; // 隐藏
                        }
                    });

                    // 可选：旋转图标表示展开/收起状态
                    if (icon) {
                        icon.style.transition = 'transform 0.3s';
                        icon.style.transform = panel.classList.contains('active') ? 'rotate(180deg)' : 'rotate(0deg)';
                    }
                });
            } catch (error) {

            }





        }
    };

    exports("miniAMap", miniAMap);
});
